<template>
    <div class="app-container">
      <div class="container">
        <div class="main page page-list">
          <div class="head-container">
            <el-card shadow="never">
              <div class="search-bar pd">
                <el-form
                  :inline="true"
                  :model="searchModel"
                  size="mini"
                  class="demo-form-inline"
                >
                  <el-form-item label="手机号">
                    <el-input
                      v-model="searchModel.mobile"
                      placeholder="手机号"
                    />
                  </el-form-item>
  
                  <el-form-item >
                    <el-button
                      type="primary"
                      @click="search"
                    >查询</el-button>
                    <el-button
                      type="default"
                      @click="reset"
                    >重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
  
          </div>
  
          <div class="data-list-wrap">
            <el-card shadow="never">
              <el-table
                v-loading="loading"
                :data="list"
                size="mini"
                style="width: 100%"
              >
              <el-table-column
                  prop="createTime"
                  label="创建时间"
                />
                <el-table-column
                  prop="id"
                  label="验证码编号"
                />

                <el-table-column
                  prop="mobile"
                  label="手机号"
                />

                <el-table-column
                  prop="code"
                  label="验证码"
                />

                <el-table-column label="验证码类型">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.type === 'google_auth'"
                  >查询谷歌验证器</span>
                  <span
                    v-if="scope.row.type === 'register'"
                  >注册</span>
                  <span
                    v-if="scope.row.type === 'login'"
                  >登录</span>
                  <span
                    v-if="scope.row.type === 'reset_password'"
                  >重置密码</span>
                  <span
                    v-if="scope.row.type === 'modify_password'"
                  >修改密码</span>
                  <span
                    v-if="scope.row.type === 'modify_mobile'"
                  >修改手机号</span>
                  <span
                    v-if="scope.row.type === 'modify_pay_password'"
                  >修改支付密码</span>
                  <span
                    v-if="scope.row.type === 'ensure_safe_pay_batch'"
                  >确认发起支付的验证码</span>
                  <span
                    v-if="scope.row.type === 'modify_white_ip'"
                  >修改IP白名单</span>
                  <span
                    v-if="scope.row.type === 'modify_notify_url'"
                  >修改推送地址</span>

                  <span
                    v-if="scope.row.type === 'modify_safe_pay_notify_url'"
                  >修改安全发推送地址</span>
                  <span
                    v-if="scope.row.type === 'develop_settings'"
                  >开发设置验证码</span>
                  <span
                    v-if="scope.row.type === 'withdraw'"
                  >提现</span>

                  <span
                    v-if="scope.row.type === 'business_auth'"
                  >企业实名认证</span>
                  <span
                    v-if="scope.row.type === 'admin_login'"
                  >管理员登录</span>
                </template>
              </el-table-column>

                <el-table-column
                  prop="sendTime"
                  label="发送时间"
                />

                <el-table-column
                  prop="expiredTime"
                  label="过期时间"
                />
              
              

  
               
              </el-table>
              <div class="paging-wrap">
                <el-pagination
                  :current-page="searchModel.pageNo"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="searchModel.pagesize"
                  :total="searchModel.count"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { searchCheckCode } from "@/api/business";
  const defaultModel = {
    mobile:"",
    pageNo: 1,
    pageSize: 10,
    count: 0,
  };
  export default {
    data() {
      return {
        searchModel: _.cloneDeep(defaultModel),
        list: [],
        loading: false,
      };
    },
    created() {
      // 初始化数据
      this.getList(1);
    },
    methods: {
        
      // 修改分页
      handleSizeChange(val) {
        this.searchModel.pageSize = val;
        this.getList(1);
      },
      // 修改页面
      handleCurrentChange(val) {
        this.loading = true;
        this.getList(val);
      },
      getList(pageNo) {
        var self = this;
        this.loading = true;
        if (pageNo != undefined) {
          this.searchModel.pageNo = pageNo;
        }
        let searchModel = _.cloneDeep(this.searchModel);
        searchCheckCode(this.compileSearchModel(searchModel))
          .then((data) => {
            self.searchModel.pageNo = ++data.pageNo;
            self.searchModel.count = data.count;
            self.searchModel.pageSize = data.pageSize;
            self.list = data.data;
            self.loading = false;
          })
          .catch((err) => {});
      },
      // 重置查询条件
      reset() {
        this.searchModel = _.cloneDeep(defaultModel);
        this.getList(1);
      },
      // 查询
      search() {
        this.getList(1);
      },
      // 对searchModel进行处理
      compileSearchModel(searchModel) {
        searchModel.pageNo = searchModel.pageNo - 1;
       
        return searchModel;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .operations {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  </style>
  